'use client'
import React, {useState} from 'react';
import {AntdRegistry} from '@ant-design/nextjs-registry';
import MyMenu from "@/app/components/MyMenu";
import {MyHeader} from "@/app/components/MyHeader";
import {ConfigProvider, Layout, theme} from 'antd';

const {Content} = Layout;

export default function RootLayout({
                                       children,
                                   }:
                                   Readonly<{
                                       children: React.ReactNode;
                                   }>) {

    const [collapsed, setCollapsed] = useState(false);
    const {
        token: {
            colorBgContainer,
            borderRadiusLG
        },
    } = theme.useToken();

    return (
        <AntdRegistry>

            <ConfigProvider>

               <Layout style={{ display: 'flex', minHeight: '100vh' }}>
                    <MyMenu collapsed={collapsed}/>
                    <Layout>
                        <MyHeader
                            collapsed={collapsed}
                            colorBgContainer={colorBgContainer}
                            setCollapsed={setCollapsed}/>

                        <Content
                            style={{
                                margin: '24px 16px',
                                padding: 24,
                                // minHeight: 280,
                                background: colorBgContainer,
                                borderRadius: borderRadiusLG,
                                  overflow: 'auto', // 可选：内容超出时可滚动
                                //   minHeight: '85vh',
                            }}>
                            <AntdRegistry>{children}</AntdRegistry>

                        </Content>
                    </Layout>
                </Layout>
            </ConfigProvider>
        </AntdRegistry>
    );
}
